<template>
	<el-dialog title="确认打印文件" :visible.sync="dialogVisible" :before-close="handleClose" width="600px">
		<div>
			<el-table :data="list" style="width: 100%" @select="selectChange">
				<el-table-column type="selection" width="50" :selectable="selectable"></el-table-column>
				<el-table-column prop="name" label="文件">
					<template slot-scope="scope">
						<el-tooltip effect="dark" content="文件已加密" placement="top-start" v-if="scope.row.isEncryption == 1">
							<span class="main_co pointer">{{ scope.row.name }}</span>
							<i class="el-icon-lock warn_f ml10 f18"></i>
						</el-tooltip>
						<span class="main_co pointer" v-else @click="preContent(scope.row, '4')">{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100" align="center">
					<template slot-scope="scope">
						<el-button plain size="small" v-if="scope.row.isSystemCover==1" @click="pre(scope.row)">封面预览</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div slot="footer"><el-button type="primary" size="small" @click="handlerPrint">确认打印</el-button></div>
		<pdf :pdfUrl="src" ref="pdf"></pdf>
	</el-dialog>
</template>

<script>
import pdf from '../pdf/index.vue';
import { PDFDocument } from 'pdf-lib';
const printJs = require('print-js');
export default {
	components: {
		pdf
	},
	props: {
		detail: {}
	},
	data() {
		return {
			src: '',
			dialogVisible: false,
			list: [],
			printable: []
		};
	},
	watch: {
		detail: {
			handler(newVal) {
				this.list = [newVal];
			},
			deep: true,
			immediate:true
		}
	},
	methods: {
		selectable(row, index) {
			return row.isEncryption == 1 ? false : true;
		},
		selectChange(selection) {
			this.printable = selection;
		},
		pre(item) {
			if (item.templateCover) {
				this.src = item.templateCover;
				this.$refs.pdf.open();
			} else {
				this.$message.error('没有封面可预览');
			}
		},
		init() {
			this.dialogVisible = true;
		},
		async handlerPrint() {
			if (this.printable.length == 0) {
				this.$message.error('请选择要打印文件!');
				return;
			}
			let printable = [];
			for (let i = 0; i < this.printable.length; i++) {
				let item = this.printable[i];
				if (item.isSystemCover == 1) {
					printable.push(item.templateCover);
				}
				if (item.pdfTemplateFileBeifen) {
					printable.push(item.pdfTemplateFileBeifen);
				}else if(item.pdfTemplateFile){
					printable.push(item.pdfTemplateFile);
				}
			}
			if (printable.length != 0) {
				const mergedPdf = await PDFDocument.create();
				for (const pdfCopyDoc of printable) {
					const pdfBytes = await fetch(pdfCopyDoc).then(res => res.arrayBuffer());
					const pdf = await PDFDocument.load(pdfBytes);
					const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
					copiedPages.forEach(page => {
						mergedPdf.addPage(page);
					});
				}
				const mergedPdfFile = await mergedPdf.save();
				const blob = new Blob([mergedPdfFile], { type: 'application/pdf' });
				const url = window.URL.createObjectURL(blob);
				try {
					printJs({
						printable: url,
						type: 'pdf'
						// targetStyles:['*']
					});
				} catch (e) {
					console.log(e);
				}
			} else {
				this.$message.error('当前选中文件缺少必要内容,请确认!');
			}
		}
	}
};
</script>

<style scoped="scoped">
.item {
	width: 154px;
}

.item .active {
	border: 2px solid #126bc9;
	position: relative;
	width: 154px;
	height: 218px;
}

.item .icon {
	position: absolute;
	right: 10px;
	top: 10px;
}
</style>
